import React, { userState } from 'react'
import { render } from 'react-dom'
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from 'react-router-dom'

import PickerView from './PickerView.jsx'
import View1 from './View1'
import View2 from './View2'
import View3 from './View3'

const App = props => {
    return (
        <div>
            <div>
                我是输入框：
                <input type="text"
                    onClick={e=>console.log('click',e)}
                    onInput={e=>console.log('input',e)}
                    onFocus={e=>console.log('focus',e)}
                    onBlur={e=>console.log('blur',e)}
                    onChange={e=>console.log('change',e)}
                />
            </div>
            <div>
                我是checkbox:
                <input type="checkbox"
                    onChange={e=>console.log('change',e)}
                />
            </div>
            <div>
                我是radio:
                <input type="radio" name="radio" value="100"
                    onChange={e=>console.log('change',e)}
                />
                <input type="radio" name="radio" value="200"
                    onChange={e=>console.log('change',e)}
                />
            </div>
            <div>
                我是picker-wiew:
                <PickerView></PickerView>
            </div>
            <Router>
                <div>react-router</div>
                <ul>
                    <li><Link to="/view1">view1</Link></li>
                    <li><Link to="/view2">view2</Link></li>
                    <li><Link to="/view3">view3</Link></li>
                </ul>
                <Switch>
                    <Route path="/view1" component={View1}></Route>   
                    <Route path="/view2" component={View2}></Route>   
                    <Route path="/view3" component={View3}></Route>   
                </Switch>
            </Router>
        </div>
    )
}
export default App